<template>
    <ElCard shadow="hover" class="h-[100%]" style="min-height:295px;">
        <template #header>
            <div class="card-header">
                状态
            </div>
        </template>
        <ElSkeleton :loading="!info" animated :rows="4">
            <ElRow  :gutter="20" justify="center">
                <ElCol :span="6" class="col-item">
                    <div class="title">负载状态</div>
                    <el-tooltip placement="bottom">
                        <template #content>
                            <div class="">
                                <div class="">最近1分钟平均负载：{{ info.CPUAvg.load1 }}</div>
                                <div class="">最近5分钟平均负载：{{ info.CPUAvg.load5 }}</div>
                                <div class="">最近15分钟平均负载：{{ info.CPUAvg.load15 }}</div>
                                <div class="">user：{{ info.CPUInfo.TotalUsage[0].user }}</div>
                                <div class="">nice：{{ info.CPUInfo.TotalUsage[0].nice }}</div>
                                <div class="">system：{{ info.CPUInfo.TotalUsage[0].system }}</div>
                                <div class="">idle：{{ info.CPUInfo.TotalUsage[0].idle }}</div>
                                <div class="">iowait：{{ info.CPUInfo.TotalUsage[0].iowait }}</div>
                                <div class="">irqt：{{ info.CPUInfo.TotalUsage[0].irq }}</div>
                                <div class="">softirq：{{ info.CPUInfo.TotalUsage[0].softirq }}</div>
                                <div class="">steal：{{ info.CPUInfo.TotalUsage[0].steal }}</div>
                                <div class="">guest：{{ info.CPUInfo.TotalUsage[0].guest }}</div>
                                <div class="">guest_nice：{{ info.CPUInfo.TotalUsage[0].guestNice }}</div>
                            </div>
                        </template>
                        <!-- todo 这里暂时没有数据。假数据 -->
                        <el-progress type="circle" :percentage="0" />
                    </el-tooltip>

                    <div class="tip">运行流程</div>
                </ElCol>
                <ElCol :span="6" class="col-item">
                    <div class="title">CPU使用率</div>
                    <el-tooltip placement="bottom">
                        <template #content>
                            <div class="">
                                <div class="">
                                    {{ info.CPUInfo.PhysicalCores }}个物理核心，{{ info.CPUInfo.LogicalCores }}个逻辑核心
                                </div>
                                <div
class="" v-for="(cpuUsageItem, cpuUsageIdex) in info.CPUInfo.EachCoreUsage
" :key="cpuUsageItem.cpu">{{ cpuUsageItem.cpu }}：{{ info.CPUEachCoreUsage[cpuUsageIdex].toFixed(2) }}%；{{
        info.CPUInfo.Details[cpuUsageIdex].modelName
}}</div>
                            </div>
                        </template>
                        <el-progress
type="circle"
                            :percentage="Number(parseFloat(info.CPUTotalUsage[0]).toFixed(2))" />
                    </el-tooltip>
                    <div class="tip">{{ info.CPUInfo.PhysicalCores }} 核心</div>
                </ElCol>
                <ElCol :span="6" class="col-item">
                    <div class="title">内存使用率</div>
                    <el-progress
type="circle"
                        :percentage="Number(parseFloat(info.MEMVirtual.usedPercent).toFixed(2))" />
                    <div class="tip">
                        {{ bytesToSize(info.MEMVirtual.used) }}
                        /
                        {{ bytesToSize(info.MEMVirtual.total) }}
                    </div>
                </ElCol>
                <ElCol :span="6" class="col-item">
                    <div class="title">磁盘使用率</div>
                    <el-tooltip placement="bottom">
                        <template #content>
                            <div class="">
                                <div class="">基本信息</div>
                                <div class="">文件系统：{{ info.DiskInfo.Usage.path }}</div>
                                <div class="">类型：{{ info.DiskInfo.Usage.fstype }}</div>
                                <div class="">挂载点：{{ info.DiskInfo.Usage.path }}</div>
                                <div class="">Inode信息</div>
                                <div class="">总数：{{ info.DiskInfo.Usage.inodesTotal }}</div>
                                <div class="">已用：{{ info.DiskInfo.Usage.inodesUsed }}</div>
                                <div class="">可用：{{ info.DiskInfo.Usage.inodesFree }}</div>
                                <div class="">Inode使用率：{{ info.DiskInfo.Usage.inodesUsedPercent.toFixed(2) }}%</div>
                                <div class="">容量信息</div>
                                <div class="">容量：{{ info.DiskInfo.Usage.total }}</div>
                                <div class="">已用：{{ info.DiskInfo.Usage.used }}</div>
                                <div class="">可用：{{ info.DiskInfo.Usage.free }}</div>
                                <div class="">使用率：{{ info.DiskInfo.Usage.usedPercent.toFixed(2) }}%</div>

                            </div>
                        </template>
                        <el-progress
type="circle"
                            :percentage="Number(parseFloat(info.DiskInfo.Usage.usedPercent).toFixed(2))" />
                    </el-tooltip>

                    <div class="tip">
                        {{ bytesToSize(info.DiskInfo.Usage.used) }}
                        /
                        {{ bytesToSize(info.DiskInfo.Usage.total) }}
                    </div>
                </ElCol>
            </ElRow>
        </ElSkeleton>
    </ElCard>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'

import { bytesToSize } from "@/utils/index"

const props = defineProps({
    info: {
        default: () => null
    },
})


</script>
<style lang="less" scoped>
.col-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    .title {
        margin-bottom: 10px;
    }

    .tip {
        margin-top: 10px;
    }
}
</style>